import React ,{useState}from "react";
import { Modal,Form, Button,Input,Select,InputNumber }  from 'antd'
import { ProFormUploadButton } from '@ant-design/pro-form';
import { upload } from "@/services/ant-design-pro/apis";

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;

const CreateClassify  = (props) => {

    const formLayout = {
        labelCol: {
            span: 5,
        },
        wrapperCol: {
            span: 15,
        },
    };
    
    const [formVals, setFormVals] = useState({})
    

    const {
        onSubmit: handCreate,
        onCancel: handleModalVisible,
        createModalVisible,
    } = props

    const handleSubmit = async () => {
        try {
            const fieldVlas = await form.validateFields();
            console.log(fieldVlas)
            handCreate({ ...fieldVlas })
            onReset()
        } catch (err) {
            console.log(err)
        }
    }

    const onReset = () => {
        form.resetFields();
    }


    const [form] = Form.useForm();

    return (
        <Modal
            title="新建分类"
            width={540}
            visible={createModalVisible}
            destroyOnClose
            onCancel={() => {
                onReset();
                handleModalVisible(false)
            }}
            footer={[
                <Button key="reset" onClick={onReset}>重置</Button>,
                <Button type="primary" key="submit" onClick={() => { handleSubmit() }}>提交</Button>
            ]}
        >
            <Form
              {...formLayout}
              initialValues={
                  {
                    productStatus:99,
                  }
              }
              form={form}
            >
                <FormItem
                  label="分类名称"
                  name="typeName"
                  rules={[{
                      required:true,
                      message:'分类名称是必须项'
                  }]}
                >
                    <Input placeholder="请输入分类名称"></Input>
                </FormItem>
                <FormItem
                  label="分类说明"
                  name="sortDes"
                  rules={[{
                    required:true,
                    message:'分类说明是必须项'
                }]}
                >
                   <Input  placeholder="请输入分类说明" rows={4}/>
                </FormItem>

             <FormItem
                    label="状态"
                    name="status"
                >
                    <Select>
                        <Option value={"ENABLE"}>启用</Option>
                        <Option value={"FORBIDDEN"}>禁用</Option>
                    </Select>
                </FormItem>
               
            </Form>
        </Modal>
    )
}


export default CreateClassify;